<template>
  <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      z-index="1000"
      @click-left="back"
    />

  <van-checkbox-group  @change="CheckToggleAll" v-model="Check" >
    <div class="cart" v-for="(item,key) in list" :key="key">
      <van-checkbox :name="item.id"></van-checkbox>

      <!-- 滑动单元格 -->
      <van-swipe-cell>
        <!-- 商品卡片 -->
        <!-- @click="ProductInfo"
        @click-thumb="ProductInfo" -->
        <van-card
          :thumb="item.product.thumb_text"
          
        >
          <template #title>
            <div class="title">{{item.product.name}}</div>
          </template>

          <!-- 卡片的插槽部分 -->
          <template #desc>
            <van-tag class="tag" type="primary">{{ item.product.flag_text }}</van-tag>
          </template>

          <template #tags>
            <div class="price">单价：￥{{item.price}}</div>
          </template>

          <template #price>
            <div class="price">合计：￥{{item.total}}</div>
          </template>

          <!-- 卡片的商品数量 步进器 -->
          <template #num >
            <van-stepper theme="round" button-size="22" v-model="item.nums" @change="CartEdit(item)"/>
          </template>
        </van-card>

        <!-- 滑动单元格插槽 右侧滑动 -->
        <template #right >
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="CartDel(item)"
          />
        </template>

      </van-swipe-cell>
    </div>
    
  </van-checkbox-group>

  <!-- 提交动作栏 -->
  <van-submit-bar :price="total" @submit="submit" button-text="提交订单">
    <van-checkbox v-model="CheckAll" @change="CheckToggle" >全选</van-checkbox>
  </van-submit-bar>
</template>

<script setup>

    const {proxy} = getCurrentInstance()

    let business = proxy.$business
    let Check = ref([])
    let CheckAll= ref(false)

    let list = ref([])

    onMounted(() => {
        CartInfo()
    })

    var params = {
        busid:proxy.$business.value.id,
    }

    //购物车信息
    const CartInfo = async () => {
    var result = await proxy.$POST({
        url:'/cart/index',
        params
    })
    // console.log(result)
    if(!result) return false

    if(result.code == 0)
    {
        proxy.$fail(result.msg)
        return false
    }

    //赋值购物车列表  循环
    result.data.map(item => item.attrs = JSON.parse(item.attrs))

    list.value = result.data
    // console.log(list.value)

    }

    const CartEdit = async (item) => {
    // console.log(item.id)
    var result = await proxy.$POST({
        url: '/cart/edit',
        params:{
            cartid: item.id, 
            nums: item.nums
        } //传递购物车id和数量
    })
    // console.log(item.id)
    if(!result) return false

    if(result.code == 0)
    {
        proxy.$fail(result.msg)
        return false
    }

    CartInfo()
    }


    const CheckToggleAll = (names) => {
        //默认Check All 为false 这里拿到的names 长度和list.value 长度相等 则为true 反之false 
        CheckAll.value = (names.length == list.value.length) ? true : false
        // console.log(CheckAll.value)
    }
    //全选
    const CheckToggle = () =>{
        // console.log(CheckAll.value)
        if(CheckAll.value)
        {
            //拿到所有的id map循环遍历
            Check.value = list.value.map(item => item.id)
            // console.log(Check.value)
        }else{
            //这里做反选 给Check.value值 赋予一个空数组
            Check.value = []
            // console.log(Check.value)
        }
        // console.log(Check.value)
    }

    const CartDel = async (item) => {
        var result = await proxy.$POST({
            url: '/cart/del',
            params:{busid:business.value.id, cartid:item.id}
        })

        if(result.code == 0)
        {
            proxy.$fail(result.msg)
            return false
        }

        //删除成功就在执行一次购物车信息的方法
        proxy.$success(result.msg)
        CartInfo()
        // console.log(business.value.id)
        // console.log(item.id)
    }

    //计算总价 computed 计算属性 vue自带
    const total = computed(() => {
        //给total初始化值
        var total = 0

        //根据勾选的元素来计算价格 map循环遍历
        list.value.map((item) => {
            //拿到选中的id
            if(Check.value.includes(item.id))
            {
                total += parseFloat(item.total)

            }
        })
        return parseFloat(total*100)
    })

    const ProductInfo = () => proxy.$router.push('/product/info')

    //返回上一页
    const back = () => proxy.$router.go(-1)

    //提交订单
    const submit = () => {
        if(Check.value.length == 0)
        {
            proxy.$fail('请选择商品')
            return false
        }

        // console.log(Check.value)

        proxy.$router.push({
            path:'/cart/confirm',
            query:{cartid:Check.value.join(',')}
        })
    }
</script>

<style scoped>
  @import url('/assets/css/cart.css');
</style>